<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)

</script>


<template>
    <div class="feedback">
        <div class="feedback-header">
            <div class="back" @click="$router.back()" style="margin-left:15px; padding-top: 30px;">
                <svg t="1731383206890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="2340" width="18" height="18">
                    <path
                        d="M733.090909 977.454545a23.202909 23.202909 0 0 1-16.453818-6.818909l-442.181818-442.158545a23.202909 23.202909 0 0 1 0-32.907636l442.181818-442.205091a23.249455 23.249455 0 1 1 32.907636 32.907636L323.816727 512.023273l425.728 425.704727A23.249455 23.249455 0 0 1 733.090909 977.454545z"
                        fill="" p-id="2341"></path>
                </svg>
                <span style="font-size: 18px; color: #000; margin-left: 120px;">意见反馈</span>
            </div>
        </div>

        <div class="feedback-content">
            <p style="color: #333;font-size: 15px; margin-left: 20px;">意见类型</p>
            <div class="feedback-content-type">
                <p :class="{ active: active === 0 }" @click="active = 0">功能体验</p>
                <p :class="{ active: active === 1 }" @click="active = 1">商品相关</p>
                <p :class="{ active: active === 2 }" @click="active = 2">其他</p>
            </div>

            <van-cell-group inset
                style="margin: 40px 0;width: 90%;margin: 0 auto;padding-top: 80px;padding-bottom: 80px;">
                <van-field rows="2" size="large" type="textarea" maxlength="10000"
                    placeholder="请分享你的真实体验，实用攻略或者一些小贴士..." show-word-limit />
            </van-cell-group>

            <div class="upload" style="float: left;margin-left: 20px; ">
                <van-uploader />
            </div>

            <div class="upload" style="float: left;margin-left: 5px;">
                <van-uploader />
            </div>

            <van-field type="tel" label="手机号" />

            <button
                style="background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%); width: 311px; height: 45px; border-radius: 10px; color: white; font-size: 14px;border: 0; margin-top: 20px; margin-left: 20px;">提交</button>

        </div>
    </div>
</template>


<style scoped lang="scss">
.feedback {
    width: 100%;
    height: 100%;


    .feedback-content-type {

        width: 90%;
        height: 100%;
        background-color: white;
        border-radius: 10px;
        display: flex;
        justify-content: space-around;
        margin: 0 auto;

        p {
            width: 80px;
            text-align: center;
            padding: 10px;
            border: 1px solid #ccc;
            color: #555;
        }

        .active {
            color: #3478F6;
            border: 1px solid #3478F6;
        }
    }
}
</style>